<template>
  <view class="cart-container">
    <view class="header">
      <text class="title">购物车</text>
      <text class="edit-btn" @tap="toggleEditMode">{{ isEditMode ? '完成' : '编辑' }}</text>
    </view>
    
    <view class="cart-content">
      <!-- 购物车为空时显示 -->
      <view class="empty-cart" v-if="cartItems.length === 0">
        <image src="/static/images/1.png" mode="aspectFit"></image>
        <text class="empty-text">购物车还是空的，快去添加商品吧</text>
        <button class="go-shop-btn" @tap="goToHome">去逛逛</button>
      </view>
      
      <!-- 购物车列表 -->
      <view v-else>
        <!-- 店铺信息 -->
        <view class="shop-item" v-for="(shop, shopIndex) in cartItems" :key="shopIndex">
          <view class="shop-header">
            <view class="shop-select" @tap="selectShop(shopIndex)">
              <uni-icons 
                :type="shop.selected ? 'checkbox-filled' : 'checkbox'" 
                size="16" 
                :color="shop.selected ? '#3d9a0b' : '#999'"
              ></uni-icons>
            </view>
            <text class="shop-name">{{ shop.shopName }}</text>
          </view>
          
          <!-- 商品列表 -->
          <view class="product-item" v-for="(product, productIndex) in shop.products" :key="productIndex">
            <view class="product-select" @tap="selectProduct(shopIndex, productIndex)">
              <uni-icons 
                :type="product.selected ? 'checkbox-filled' : 'checkbox'" 
                size="16" 
                :color="product.selected ? '#3d9a0b' : '#999'"
              ></uni-icons>
            </view>
            
            <view class="product-info">
              <image :src="product.image" mode="aspectFit"></image>
              <view class="product-details">
                <text class="product-name">{{ product.name }}</text>
                <text class="product-spec">{{ product.spec }}</text>
                <view class="product-footer">
                  <text class="price">¥{{ product.price.toFixed(2) }}</text>
                  <view class="quantity">
                    <text class="decrease" @tap="decreaseQuantity(shopIndex, productIndex)" :class="{ disabled: product.quantity <= 1 }">-</text>
                    <text class="num">{{ product.quantity }}</text>
                    <text class="increase" @tap="increaseQuantity(shopIndex, productIndex)">+</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部结算栏 -->
    <view class="cart-footer" v-if="cartItems.length > 0">
      <view class="select-all">
        <uni-icons 
          :type="isSelectAll ? 'checkbox-filled' : 'checkbox'" 
          size="16" 
          :color="isSelectAll ? '#3d9a0b' : '#999'"
          @tap="selectAll"
        ></uni-icons>
        <text>全选</text>
      </view>
      
      <view class="total-price">
        <text>合计：</text>
        <text class="price">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      
      <view class="checkout-btn" :class="{ disabled: selectedCount === 0 }" @tap="checkout">
        {{ isEditMode ? '删除' : `结算(${selectedCount})` }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isEditMode: false,
        cartItems: [
          {
            shopName: '鲜邻社生鲜店',
            selected: true,
            products: [
              {
                id: 1,
                name: '有机西红柿',
                spec: '500g/份',
                price: 9.90,
                quantity: 2,
                image: '/static/images/tomato.png',
                selected: true
              },
              {
                id: 2,
                name: '纯鲜牛奶',
                spec: '500ml/瓶',
                price: 12.80,
                quantity: 1,
                image: '/static/images/milk.png',
                selected: true
              }
            ]
          }
        ]
      }
    },
    computed: {
      isSelectAll() {
        // 检查所有商品是否都被选中
        for (let shop of this.cartItems) {
          for (let product of shop.products) {
            if (!product.selected) {
              return false;
            }
          }
        }
        return this.cartItems.length > 0;
      },
      totalPrice() {
        // 计算总价
        let total = 0;
        for (let shop of this.cartItems) {
          for (let product of shop.products) {
            if (product.selected) {
              total += product.price * product.quantity;
            }
          }
        }
        return total;
      },
      selectedCount() {
        // 计算选中的商品数量
        let count = 0;
        for (let shop of this.cartItems) {
          for (let product of shop.products) {
            if (product.selected) {
              count += product.quantity;
            }
          }
        }
        return count;
      }
    },
    methods: {
      // 切换编辑模式
      toggleEditMode() {
        this.isEditMode = !this.isEditMode;
      },
      
      // 选中/取消选中店铺
      selectShop(shopIndex) {
        const shop = this.cartItems[shopIndex];
        shop.selected = !shop.selected;
        
        // 同步店铺内所有商品的选中状态
        shop.products.forEach(product => {
          product.selected = shop.selected;
        });
      },
      
      // 选中/取消选中商品
      selectProduct(shopIndex, productIndex) {
        const product = this.cartItems[shopIndex].products[productIndex];
        product.selected = !product.selected;
        
        // 检查店铺内所有商品是否都被选中
        const shop = this.cartItems[shopIndex];
        let allSelected = true;
        for (let p of shop.products) {
          if (!p.selected) {
            allSelected = false;
            break;
          }
        }
        shop.selected = allSelected;
      },
      
      // 全选/取消全选
      selectAll() {
        const isAllSelected = this.isSelectAll;
        for (let shop of this.cartItems) {
          shop.selected = !isAllSelected;
          for (let product of shop.products) {
            product.selected = !isAllSelected;
          }
        }
      },
      
      // 减少商品数量
      decreaseQuantity(shopIndex, productIndex) {
        const product = this.cartItems[shopIndex].products[productIndex];
        if (product.quantity > 1) {
          product.quantity--;
        }
      },
      
      // 增加商品数量
      increaseQuantity(shopIndex, productIndex) {
        const product = this.cartItems[shopIndex].products[productIndex];
        product.quantity++;
      },
      
      // 结算/删除
      checkout() {
        if (this.selectedCount === 0) {
          return;
        }
        
        if (this.isEditMode) {
          // 删除选中的商品
          for (let i = this.cartItems.length - 1; i >= 0; i--) {
            const shop = this.cartItems[i];
            for (let j = shop.products.length - 1; j >= 0; j--) {
              if (shop.products[j].selected) {
                shop.products.splice(j, 1);
              }
            }
            
            // 如果店铺内没有商品了，删除店铺
            if (shop.products.length === 0) {
              this.cartItems.splice(i, 1);
            }
          }
          
          this.toggleEditMode();
        } else {
          // 结算逻辑
          uni.showToast({
            title: '结算成功',
            icon: 'success'
          });
        }
      },
      
      // 去首页
      goToHome() {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    }
  }
</script>

<style scoped>
  .cart-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .title {
    font-size: 18px;
    font-weight: 500;
  }
  
  .edit-btn {
    color: #666;
  }
  
  .cart-content {
    flex: 1;
    overflow-y: auto;
  }
  
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
  }
  
  .empty-cart image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }
  
  .empty-text {
    color: #999;
    margin-bottom: 20px;
  }
  
  .go-shop-btn {
    background-color: #3d9a0b;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
  }
  
  .shop-item {
    margin-bottom: 10px;
    background-color: #fff;
  }
  
  .shop-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  
  .shop-select {
    margin-right: 10px;
  }
  
  .shop-name {
    font-size: 14px;
  }
  
  .product-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  
  .product-select {
    margin-right: 10px;
    display: flex;
    align-items: center;
  }
  
  .product-info {
    flex: 1;
    display: flex;
  }
  
  .product-info image {
    width: 80px;
    height: 80px;
    background-color: #f8f8f8;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .product-name {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4;
  }
  
  .product-spec {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
  }
  
  .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    align-self: flex-end;
  }
  
  .price {
    color: #e63946;
    font-weight: 500;
  }
  
  .quantity {
    display: flex;
    align-items: center;
  }
  
  .decrease,
  .increase {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    font-size: 16px;
  }
  
  .decrease.disabled {
    color: #ccc;
  }
  
  .num {
    width: 30px;
    text-align: center;
  }
  
  .cart-footer {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
  }
  
  .select-all {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  
  .select-all text {
    margin-left: 5px;
    font-size: 14px;
  }
  
  .total-price {
    flex: 1;
    font-size: 14px;
  }
  
  .total-price .price {
    font-size: 16px;
    font-weight: 500;
  }
  
  .checkout-btn {
    background-color: #3d9a0b;
    color: #fff;
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 14px;
  }
  
  .checkout-btn.disabled {
    background-color: #ccc;
  }
</style>